<template>
  <div id="hotedit">
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
<!--    沸点编辑框-->
    <div class="edit-comment">
      <el-input
          type="textarea"
          autosize
          placeholder="快和掘友一起分享新鲜事！告诉你个小秘密，发布沸点时添加圈子和话题会被更多掘友看到哦~"
          maxlength="1000"
          show-word-limit
          id="hot-input"
          @input="checkNull"
          v-model="form.hotword">
      </el-input>
<!--      图片区域展示-->
      <div class="img-preview" v-if="fileList.length">
        <img v-for="(item,index) in fileList" :key="index" :src="item" alt="" class="prevImgItem">
      </div>
<!--      选择话题显示到input框-->
      <span class="topic-words" v-if="topicWord">#{{ topicWord }}#</span>
    </div>

<<<<<<< HEAD

=======
=======
    <el-input
        type="textarea"
        autosize
        placeholder="快和掘友一起分享新鲜事！告诉你个小秘密，发布沸点时添加圈子和话题会被更多掘友看到哦~"
        maxlength="1000"
        show-word-limit
        id="hot-input"
        v-model="form.hotword">
    </el-input>
    <el-upload
        class="upload-demo"
        action="#"
        :on-change="handleChange"
        :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    <div class="hot-foot">
      <div class="hot-foot-left">
        <ul>
          <li>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
            <div class="mumu">
<!--              emoji组件-->
              <el-col style="position: absolute;top:25px; z-index:10">
                <VEmojiPicker v-show="showDialog" @select="selectEmoji"/>
              </el-col>
            </div>
            <div class="left">
              <span type="text" size="mini" @click="showDialog = !showDialog">😀表情</span>
            </div>
          </li>
          <li style="overflow: hidden">
            <i class="el-icon-picture-outline"></i>
            <span class="imgText">图片</span>
            <input
                type="file"
                class="img_upload"
                accept="image/*"
                @change="changeImg($event)"/>
<<<<<<< HEAD

=======
=======
            <i class="el-icon-sugar"></i>
            <span>表情</span>
          </li>
          <li>
            <i class="el-icon-picture-outline"></i>
            <span class="imgText">图片</span>
            <input type="file" class="img_upload" @change="changeImg($event)">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
          </li>
          <li>
            <i class="el-icon-link"></i>
            <span>链接</span>
          </li>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966

          <el-popover
              placement="bottom-start"
              width="250"
              trigger="click">
            <li slot="reference">
              <i class="el-icon-chat-line-square"></i>
              <span>话题</span>
            </li>
            <ul class="topic-list">
              <li v-for="(item,index) in topicList" :key="index" @click="selectTopic(index)">#{{ item }}#</li>
            </ul>
          </el-popover>
<<<<<<< HEAD

=======
=======
          <li>
            <i class="el-icon-chat-line-square"></i>
            <span>话题</span>
          </li>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        </ul>
      </div>
      <el-button type="primary" class="hot-commit" @click="commitHot">发布</el-button>
    </div>
  </div>
</template>

<script>
import {allUse} from "../../requests/apis";
import axios from "axios";
<<<<<<< HEAD
import {VEmojiPicker} from "v-emoji-picker";

=======
<<<<<<< HEAD
import {VEmojiPicker} from "v-emoji-picker";
=======

>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
export default {
  name: "hotEdit",
  data() {
    return {
      form: {
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        hotword: ''//input框绑定值
      },
      topicWord: '',//话题
      //话题列表
      topicList: ['前端', '后端', 'HTML', '怎么避免被同事帅锅', '被领导pua了怎么办', '约会应该支持AA制吗？', '工作中加分的好习惯', '单曲循环的歌曲', '喵星人最可爱的一点', '怎么看待996', '年轻人要不要裸辞？'],
      fileList: [],//图片file文件
      imgFormData: [],//图片真实能用的url
      showDialog:false//emoji显示
    }
  },
  components:{
    VEmojiPicker
  },
  methods: {
    // 选择emoji,将emoji返回的值添加到input框中
    selectEmoji(emoji) {
      this.form.hotword+=emoji.data
    },
    checkNull() {
      if (this.form.hotword.trim() === '') {
        this.topicWord = ''
        this.form.hotword = ''
      }
    },
    selectTopic(index) {
      this.topicWord = this.topicList[index]
      let spaceWords = ''
      for (let i = 0; i < this.topicWord.length * 4; i++) {
        spaceWords += ' '
      }
      this.form.hotword = this.form.hotword.trimLeft()
      this.form.hotword = spaceWords + this.form.hotword
    },
    changeImg(e) {
      let that = this
      let readers = new FileReader()
      for (let i = 0; i < e.target.files.length; i++) {
        this.imgFormData.push(e.target.files[i])
      }
      readers.readAsDataURL(e.target.files[e.target.files.length - 1])
      readers.onload = function () {
        that.fileList.push(this.result)
      }
    },
    commitHot() {
      let allImgFormData = []
      // formData.append('img',this.imgFormData[0])
      for (let i = 0; i < this.imgFormData.length; i++) {
        let formData = new FormData()
        formData.append('img', this.imgFormData[i])
        allImgFormData.push(allUse('/api/savePic', 'post', formData))
      }
      axios.all(allImgFormData)
          .then(res => {
            let imgRealUrl = []
            for (let i = 0; i < res.length; i++) {
              imgRealUrl.push('http://api_devss.wanxikeji.cn/'+res[i].data.data)
            }
            let infoObj = {
              info:this.form.hotword.trimLeft().replace(/\n/g, '<br/>'),
              img:imgRealUrl
            }
            allUse('/api/addModifyArticle', 'post', {
              type: 2,
              info: JSON.stringify(infoObj),
              tags_name: [this.topicWord],
              token: this.$getSession().token
            }).then(res => {
              console.log(res)
              if (res.data.code === 2000) {
                this.$message({
                  type: 'success',
                  message: '发布成功'
                })
                this.form.hotword = ''
                this.fileList = []
              }
            }).catch(err => {
              console.log(err)
            })
          }).catch(err => {
        console.log(err)
      })
<<<<<<< HEAD
=======


=======
        hotword: ''
      },
      fileList:[]
    }
  },
  methods: {
    handleChange(file, fileList) {
      console.log(fileList)
      let formdata = new FormData()
      formdata.append(file)
    },
    changeImg(e){
      // let that = this
      let files = e.target.files[0]
      let formdata = new FormData()  // 创建form对象
      formdata.append('file', files)
      console.log(formdata.get('file'))

      axios.post('http://api_devss.wanxikeji.cn/api/savePic',formdata).then(res=>{
        console.log(res)
      })
    },
    commitHot() {
      allUse('/api/addModifyArticle', 'post', {
        type: 2,
        info: this.form.hotword,
        tags_name: ['默认tag'],
        token: this.$getSession().token
      }).then(res => {
        console.log(res)
        if (res.data.code === 2000) {
          this.$message({
            type: 'success',
            message: '发布成功'
          })
          this.form.hotword = ''
        }
      }).catch(err => {
        console.log(err)
      })
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    }
  }
}
</script>

<style>
#hotedit {
  width: 670px;
  background-color: #fff;
  border-radius: 2px;
  padding: 25px;
}

.qlog-head a {
  font-size: 24px;
}

#hot-input {
<<<<<<< HEAD
  min-height: 180px !important;
  margin-top: 10px;

=======
<<<<<<< HEAD
  min-height: 180px !important;
  margin-top: 10px;
=======
  margin-top: 10px;
  min-height: 130px !important;
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  font-size: 14px;
  line-height: 24px;
  color: #252933;
  font-family: "Microsoft YaHei";
  background-color: #F2F3F5;
  border: none;
  resize: none;
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  padding-bottom: 120px;
  border: 1px solid #ffffff;
}

#hot-input:focus {
  background-color: #fff;
  border: 1px solid #1E80FF;
<<<<<<< HEAD

=======
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}

.hot-foot {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot-foot-left ul {
  width: 265px;
  display: flex;
  justify-content: space-between;
}

.hot-foot-left ul li {
  position: relative;
  color: #4e5969;
  font-size: 14px;
  vertical-align: middle;
  cursor: pointer;
}

.hot-foot-left ul li:hover {
  color: #1E80FF;
}

.hot-foot-left ul li i {
  font-size: 16px;
  margin-right: 3px;
}

.hot-commit {
  width: 90px;
  height: 35px;
}

.img_upload {
  position: absolute;
  left: 0;
  opacity: 0;
<<<<<<< HEAD
  width: 42px;

=======
<<<<<<< HEAD
  width: 42px;
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}

.imgText {
  pointer-events: none;
}

<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
.edit-comment {
  position: relative;
}

.img-preview {
  position: absolute;
  bottom: 25px;
  left: 15px;
}

.prevImgItem {
  width: 80px;
  height: 80px;
  box-shadow: 0 0 2px #0f0f0f90;
  margin-right: 10px;
}

.topic-list {
  padding: 5px 10px;
  max-height: 340px;
  overflow-y: scroll;
}

.topic-list li {
  font-size: 14px;
  line-height: 24px;
  color: #515767;
  padding: 6px 0;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
}

.topic-list li:hover {
  color: #1E80FF;
}

.topic-words {
  font-size: 14px;
  line-height: 24px;
  color: #1E80FF;
  font-family: "Microsoft YaHei";
  position: absolute;
  left: 10px;
  top: 15px;
}
<<<<<<< HEAD

=======
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
</style>